<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui"
    />
    <title>孕产妇健康管理平台</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css"/>
</head>
<body
        class="vertical-layout vertical-menu 2-columns menu-expanded fixed-navbar"
        data-open="click"
        data-menu="vertical-menu"
        data-color="bg-gradient-x-purple-blue"
        data-col="2-columns"
>
<nav
        class="
        header-navbar
        navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow
        fixed-top
        navbar-semi-light
      "
>
    <div class="navbar-wrapper">
        <div class="navbar-container content">
            <div class="collapse navbar-collapse show" id="navbar-mobile">
                <ul class="nav navbar-nav mr-auto float-left">
                    <li class="nav-item mobile-menu d-md-none mr-auto">
                        <a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"
                        ><i class="ft-menu font-large-1"></i
                        ></a>
                    </li>
                    <li class="nav-item d-none d-md-block">
                        <a class="nav-link nav-menu-main menu-toggle hidden-xs" href="#"
                        ><i class="ft-menu"></i
                        ></a>
                    </li>
                    <li class="nav-item dropdown navbar-search">
                        <a
                                class="nav-link dropdown-toggle hide"
                                data-toggle="dropdown"
                                href="#"
                        ><i class="ficon ft-search"></i
                        ></a>
                        <ul class="dropdown-menu">
                            <li class="arrow_box">
                                <form>
                                    <div class="input-group search-box">
                                        <div
                                                class="position-relative has-icon-right full-width"
                                        >
                                            <input
                                                    class="form-control"
                                                    id="search"
                                                    type="text"
                                                    placeholder="Search here..."
                                            />
                                            <div
                                                    class="form-control-position navbar-search-close"
                                            >
                                                <i class="ft-x"></i>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav float-right">
                    <li class="dropdown dropdown-user nav-item">
                        <a class="nav-link dropdown-user-link" href="login.html">
                            <span class="username"><i class="ft-power"></i>退出登录</span>
                        </a>
                    </li>
                    <li class="dropdown dropdown-user nav-item">
                        <a class="dropdown-toggle nav-link dropdown-user-link" href="#">
                            <span class="username">Admin</span>
                            <span class="avatar avatar-online"
                            ><img src="app-assets/images/avatar-s-19.png" alt="avatar"
                            /></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div
        class="main-menu menu-fixed menu-light menu-accordion menu-shadow"
        data-scroll-to-active="true"
        data-img="app-assets/images/backgrounds/02.jpg"
>
    <div class="navbar-header">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item mr-auto">
                <a class="navbar-brand" href="index.html"
                ><img
                        class="brand-logo"
                        alt="Chameleon admin logo"
                        src="app-assets/images/logo.png"
                />
                    <h3 class="brand-text">孕产妇健康管理平台</h3>
                </a>
            </li>
            <li class="nav-item d-md-none">
                <a class="nav-link close-navbar"><i class="ft-x"></i></a>
            </li>
        </ul>
    </div>
    <div class="main-menu-content">
        <ul
                class="navigation navigation-main"
                id="main-menu-navigation"
                data-menu="menu-navigation"
        >
            <li class="nav-item">
                <a href="index.html"
                ><i class="ft-home"></i><span class="menu-title">首页</span></a
                >
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-layers"></i
                ><span class="menu-title"> 系统设置</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="基本设置.html">基本设置</a></li>
                    <li>
                        <a class="menu-item" href="管理员管理.html">管理员管理</a>
                    </li>
                    <li>
                        <a class="menu-item" href="用户参数管理.html">用户参数管理</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item open">
                <a href="#"
                ><i class="ft-users"></i
                ><span class="menu-title"> 用户管理</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="用户管理.html">用户管理</a></li>
                    <li>
                        <a class="menu-item" href="团体用户管理.html">团体用户管理</a>
                    </li>
                    <li><a class="menu-item" href="添加用户.html">添加用户</a></li>
                    <li class="active">
                        <a class="menu-item" href="团体管理.html">团体管理</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-layout"></i
                ><span class="menu-title"> 评测管理</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="评测预约.html">评测预约</a></li>
                    <li><a class="menu-item" href="答题记录.html">答题记录</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-feather"></i
                ><span class="menu-title"> 量表管理</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="量表管理.html">量表管理</a></li>
                    <li>
                        <a class="menu-item" href="量表类别管理.html">量表类别管理</a>
                    </li>
                    <li><a class="menu-item" href="套餐管理.html">套餐管理</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-edit"></i
                ><span class="menu-title"> 医师管理</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="医师管理.html">医师管理</a></li>
                    <li><a class="menu-item" href="添加医师.html">添加医师</a></li>
                    <li><a class="menu-item" href="科室管理.html">科室管理</a></li>
                    <li>
                        <a class="menu-item" href="医师预约管理.html">医师预约管理</a>
                    </li>
                    <li><a class="menu-item" href="班次管理.html">班次管理</a></li>
                    <li>
                        <a class="menu-item" href="工作时间管理.html">工作时间管理</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-shield"></i
                ><span class="menu-title"> 预警管理</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="用户预警.html">用户预警</a></li>
                    <li><a class="menu-item" href="题库预警.html">题库预警</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-file-text"></i
                ><span class="menu-title"> 报告管理</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="报告管理.html">报告管理</a></li>
                    <li><a class="menu-item" href="报告审核.html">报告审核</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-trending-up"></i
                ><span class="menu-title"> 数据分析</span></a
                >
                <ul class="menu-content">
                    <li><a class="menu-item" href="量表分析.html">量表分析</a></li>
                    <li><a class="menu-item" href="人群分析.html">人群分析</a></li>
                    <li><a class="menu-item" href="阳性分析.html">阳性分析</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-bar-chart-2"></i
                ><span class="menu-title"> 临床数据</span></a
                >
                <ul class="menu-content">
                    <li>
                        <a class="menu-item" href="临床数据管理.html">临床数据管理</a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#"
                ><i class="ft-sidebar"></i
                ><span class="menu-title"> 训练管理</span></a
                >
                <ul class="menu-content">
                    <li>
                        <a class="menu-item" href="心理训练管理.html">心理训练管理</a>
                    </li>
                    <li>
                        <a class="menu-item" href="添加心理训练.html">添加心理训练</a>
                    </li>
                    <li>
                        <a class="menu-item" href="训练类别管理.html">训练类别管理</a>
                    </li>
                    <li>
                        <a class="menu-item" href="训练类型管理.html">训练类型管理</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="navigation-background"></div>
</div>
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-wrapper-before"></div>
        <div class="content-header row">
            <div class="content-header-left col-md-4 col-12 mb-2">
                <h3 class="content-header-title">团体(单位)管理</h3>
            </div>
            <div class="content-header-right col-md-8 col-12">
                <div class="breadcrumbs-top float-md-right">
                    <div class="breadcrumb-wrapper mr-1">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                            <li class="breadcrumb-item"><a href="#"> 用户管理</a></li>
                            <li class="breadcrumb-item active">团体(单位)管理</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section class="file-browser">
                <div class="row match-height">
                    <div class="col-lg-12 col-md-12">
                        <div class="card" style="">
                            <div class="card-header">
                                <label class="card-title" for="exampleInputFile"
                                >团体单位管理</label
                                >
                            </div>
                            <div class="card-block" id="app">
                                <div class="card-body">
                                    <div class="topbtn">
                                        <!--						<a href="#" class="btn btn-bg-gradient-x-purple-red"  data-toggle="modal" data-target="#myModal">创建团体</a>-->
                                        <a
                                                class="btn btn-bg-gradient-x-purple-red"
                                                @click="openwindow"

                                        >创建团体</a
                                        >&nbsp<a
                                            class="btn btn-bg-gradient-x-purple-red"
                                            @click="add"
                                    >保存</a
                                    >&nbsp
                                        <a
                                                class="btn btn-bg-gradient-x-purple-red"
                                                @click="closeWindow"

                                        >关闭</a
                                        ><br/>
                                        <div class="form1" v-show="isshow">
                                            <ul class="row">
                                                <li class="col-xs-4">
                              <span>联系电话：</span
                              ><input
                                                        type="text"
                                                        class="form-control"
                                                        v-model="newteammsg.tel"
                                                />
                                                </li>
                                                <li class="col-xs-4">
                              <span>团体名称：</span
                              ><input
                                                        type="text"
                                                        class="form-control"
                                                        v-model="newteammsg.name"
                                                />
                                                </li>
                                                <li class="col-xs-4">
                              <span>联系人：</span
                              ><input
                                                        type="text"
                                                        class="form-control"
                                                        v-model="newteammsg.teamleader"
                                                />
                                                </li>
                                                <li class="col-xs-4">
                              <span>人员数量：</span
                              ><input
                                                        type="text"
                                                        class="form-control"
                                                        v-model="newteammsg.quantity"
                                                />
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="selbox">
                                        <div class="form1">
                                            <ul class="row">
                                                <li class="col-xs-4">
                                                    <span>联系人：</span>
                                                    <input
                                                            type="text"
                                                            class="form-control"
                                                            v-model="keyWords"
                                                    />
                                                </li>

                                                <li class="col-xs-4">
                                                    <span>联系电话：</span>
                                                    <input type="text" class="form-control"/>
                                                </li>
                                                <li class="col-xs-4" style="padding-left: 10px">
                                                    <a
                                                            href="#"
                                                            class="btn btn-primary"
                                                            @click="tosearch"
                                                    >查询</a
                                                    >
                                                    <a href="#" class="btn btn-default"
                                                       @click="resetsearchteammsg()"
                                                    >重置</a
                                                    >
                                                    <!--                                                    <a class="btn" role="button" data-toggle="collapse"-->
                                                    <!--                                                       href="#collapseExample" aria-expanded="false"-->
                                                    <!--                                                       aria-controls="collapseExample">更多查询条件</a>-->
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div
                                            class="collapse in"
                                            id="collapseExample"
                                            aria-expanded="true"
                                            style=""
                                    >
                                        <div class="form1">
                                            <ul class="row">
                                                <li class="col-xs-4">
                                                    <span>团体名称：</span>
                                                    <input type="text" class="form-control"/>
                                                </li>

                                                <li class="col-xs-4">
                                                    <span> 团队人数：</span>
                                                    <div class="clearfix">
                                                        <div class="pull-left">
                                                            <input
                                                                    type="text"
                                                                    class="form-control"
                                                                    style="min-width: inherit; width: 50px"
                                                            />
                                                        </div>
                                                        <div
                                                                class="pull-left"
                                                                style="line-height: 36px"
                                                        >
                                                            -
                                                        </div>
                                                        <div class="pull-left">
                                                            <input
                                                                    type="text"
                                                                    class="form-control"
                                                                    style="min-width: inherit; width: 50px"
                                                            />
                                                        </div>
                                                    </div>
                                                </li>

                                                <li class="col-xs-4">
                                                    <span>创建时间：</span>
                                                    <input
                                                            type="text"
                                                            class="form-control"
                                                            id="date"
                                                            style="min-width: 230px"
                                                            placeholder="请选择起止时间"
                                                    />
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <!--                                            <th><input type="checkbox" class="allsel"></th>-->
                                            <th>团体Id</th>
                                            <th>联系电话</th>
                                            <th>团体名称</th>
                                            <th>联系人</th>
                                            <th>团体人员数量</th>
                                            <th>创建时间</th>
                                            <th>状态</th>
                                            <th>功能</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item,index) in searchteammsg" :key="item.id">
                                            <!--                                            <td><input type="checkbox" class="seli"></td>-->

                                            <td>{{item.id}}</td>
                                            <td>{{item.tel}}</td>
                                            <td>{{item.name}}</td>
                                            <td>{{item.teamleader}}</td>
                                            <td>{{item.quantity}}</td>
                                            <td>{{item.date}}</td>
                                            <td>
                                                <span class="text-success">{{item.status}}</span>
                                            </td>
                                            <td>
                                                <a href="" @click.prevent="update(item.id)">修改</a>&nbsp&nbsp
                                                <a href="" @click.prevent="del(item.id)">删除</a>
                                            </td>

                                            <!-- <td><a href="#"   data-toggle="modal" data-target="#myModal">修改</a></td>-->
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div class="">
                                        <a href="#" class="btn btn-success">审核</a>
                                        <a href="#" class="btn btn-warning">拒绝</a>
                                    </div>
                                    <nav aria-label="Page navigation" class="page">
                                        <ul class="pagination">
                                            <li class="page-item">
                                                <a class="page-link" href="#" aria-label="Previous">
                                                    <span aria-hidden="true">上一页</span>
                                                </a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">1</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">2</a>
                                            </li>
                                            <li class="page-item active">
                                                <a class="page-link" href="#">3</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">4</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="#">5</a>
                                            </li>
                                            <li class="page-item">
                                                <a class="page-link" href="#" aria-label="Next">
                                                    <span aria-hidden="true">下一页</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<footer
        class="footer footer-static footer-light navbar-border navbar-shadow">
    <div class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
        <span class="float-md-left d-block d-md-inline-block">2018 &copy; Copyright 孕产妇健康管理平台 © 2018-2020</span>
        <ul
                class="
            list-inline
            float-md-right
            d-block d-md-inline-blockd-none d-lg-block
            mb-0
          ">
            <li class="list-inline-item">孕产妇健康管理平台</li>
        </ul>
    </div>
</footer>

<!-- Modal -->
<div
        class="modal fade"
        id="myModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加修改团体</h5>
                <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form form-horizontal">
                    <div class="form-body">
                        <div class="form-group row">
                            <label class="col-md-3 label-control" for="eventRegInput1"
                            >联系电话</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 label-control" for="eventRegInput2">团体名称</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 label-control" for="eventRegInput3"
                            >联系人</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control"/>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-def" data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-danger">执行操作</button>
            </div>
        </div>
    </div>
</div>

<!-- BEGIN VENDOR JS-->
<!--<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>-->
<!--<script src="app-assets/js/app-menu.js" type="text/javascript"></script>-->
<!--<script src="app-assets/js/app.js" type="text/javascript"></script>-->
<script src="app-assets/laydate/laydate.js" type="text/javascript"></script>

<script>
    lay("#version").html("-v" + laydate.v);
    laydate.render({
        elem: "#date",
        range: true,
        theme: "#6967ce",
    });
</script>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {ref, reactive, toRefs} = Vue;

    const app = Vue.createApp({
        setup(props) {
            let maxId = ref(0)
            let isshow = ref(false)
            let searchteammsg = ref({})
            let newteammsg = ref({
                id: 0,
                tel: '',
                name: '',
                teamleader: '',
                quantity: '',
                date: new Date().toLocaleDateString(),
                status: '通过'
            })
            const keyWords = ref('')

            let teammsg = ref([
                {
                    id: 1,
                    tel: '18609555513',
                    name: '明日校园',
                    teamleader: '田嘉',
                    quantity: 3,
                    date: "2021/09/03",
                    status: '通过'
                }
            ])

            //打开输入框
            function openwindow() {
                isshow.value = true
            }

            //关闭输入框
            function closeWindow() {
                isshow.value = false
                newteammsg.value = ''
            }

            //重置搜索条件
            function resetsearchteammsg() {
                keyWords.value = '';
                tosearch();
            }

            //增加
            function add() {
                const id = newteammsg.value.id;
                if (!newteammsg.value.tel || !newteammsg.value.name || !newteammsg.value.teamleader || !newteammsg.value.quantity) {
                    alert('输入值不能为空！')
                } else if (id > 0) {
                    let editteammsg = teammsg.value.filter(function (item) {
                        return id == item.id
                    })
                    if (editteammsg.length == 1) {
                        Object.assign(editteammsg[0], newteammsg.value);
                    } else {
                        alert('未找到原始记录');
                        return false;
                    }
                } else {
                    newteammsg.value.id = maxId.value++;
                    teammsg.value.push(newteammsg.value);
                }
                newteammsg.value = {id: 0, tel: '', name: '', teamleader: '', quantity: '', date: '', status: ''}
                tosearch();
                closeWindow();
            }

            //删除
            function del(id) {
                alert('确认删除该数据？')
                var index = teammsg.value.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                })
                teammsg.value.splice(index, 1);
                tosearch();

            }

            //修改
            function update(id) {
                let obj = teammsg.value.filter(function (item) {
                    const flag = item.id == id;
                    return flag;
                })
                if (obj.length == 1) {
                    obj = obj[0];
                    newteammsg.value.id = obj.id;
                    newteammsg.value.tel = obj.tel;
                    newteammsg.value.name = obj.name;
                    newteammsg.value.teamleader = obj.teamleader;
                    newteammsg.value.date = obj.date;
                    newteammsg.value.quantity = obj.quantity;
                    openwindow();
                }

            }

            //搜索
            function tosearch() {
                const condition = keyWords.value;
                searchteammsg.value = teammsg.value.filter(function (item) {
                    const flag = item.teamleader.indexOf(condition) >= 0;
                    return flag
                })
            }

            return {
                teammsg,
                openwindow,
                add,
                keyWords,
                del,
                closeWindow,
                update,
                searchteammsg,
                resetsearchteammsg,
                isshow,
                maxId,
                tosearch,
                newteammsg
            }
        },
        mounted() {
            this.searchteammsg = this.teammsg;
            for (let index = 0; index < this.teammsg.length; index++) {
                const element = this.teammsg[index];
                if (this.maxId < element.id) {
                    this.maxId = element.id + 1
                }
            }
        },
        computed: {
            totals() {
                return this.searchteammsg.length;
            }
        }
    });
    app.mount("#app");
</script>
</body>
</html>
